<template>
  <div id="app">
    <input type="button" value="dialog" @click="clickBtn">
    <!-- <Dialog  v-if="isMask" title="我是标题" contents="<h1>我是内容</h1><input " ok="确认" cancel="取消" @child-ok="childok" @child-cancel="childcancel"/> -->
    <Dialog  v-if="isMask" :propsItem="propsItem" @child-ok="childok" @child-cancel="childcancel">
        <template>
          <D1></D1>
        </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from './components/dialog'
import D1 from './components/d1'

export default {
  name: 'App',
  components: {
    Dialog,D1
  },
  data(){
    return {
      isMask:false,
      propsItem:{
        title:'我是dialog标题',
        contents:'我是dialog内容<input type="button" value="dialog" @click="clickBtn">',
        ok:'我是确认按钮',
        cancel:'我是取消按钮',
        isMask:true,
        rgba:true
      }
    }
  },
  methods:{
    clickBtn(){
      this.propsItem.isMask = this.isMask = true
    },
    childok(){
      alert('xxx')
    },
    childcancel(){
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
